<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: header(~{::title},~{::link},~{::style})">

</head>
<body>

<div id="content" class="content">
    <div class="row">
        <div class="col-sm-12">
            <div class="well">
<!--                <fieldset>-->
<!--                    <legend>-->
<!--                    </legend>-->
<!--                    <button id="btn-add" class="btn btn-primary btn-sm">新增部门</button>-->
<!--                </fieldset>-->

                <table class="table table-striped table-bordered zy-table-ellipsis" id="treetable">
                    <thead>
                    <tr>
                        <th></th>
                        <th>部门名称</th>
                        <th>排序</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>


            </div>
        </div>
    </div>

</div>


<div th:replace="common/htmlJS::common_js(~{::script})">
    <script th:src="@{/assets/js/dataTables.treeGrid.js}"></script>
    <script th:inline="javascript">
        var dataTable;
        $(function () {
            /**
             l - Length changing 改变每页显示多少条数据的控件
             f - Filtering input 即时搜索框控件
             t - The Table 表格本身
             i - Information 表格相关信息控件
             p - Pagination 分页控件
             r - pRocessing 加载等待显示信息
             **/
            dataTable = $('#treetable').DataTable({
                "dom": "tr",
                "ordering": false, //禁用排序
                "processing": true,
                "serverSide": true,
                "autoWidth": false,
                "ajax": {
                    "url": basePath+"/system/dept/list/tree",
                },
                'treeGrid': {
                    'left': 15,
                    'expandAll' : false, //是否默认展开 true 是
                    'expandIcon': '<span><i class="fa fa-plus-square"></i></span>',
                    'collapseIcon': '<span><i class="fa fa-minus-square"></i></span>'
                },
                "columns": [
                    {
                        className: 'treegrid-control',
                        'width':'30',
                        data: function (item) {
                            if (item.children != null && item.children.length > 0) {
                                return '<span><i class="fa fa-plus-square"></i></span>';
                            }
                            return '';
                        }
                    },
                    {"data": "deptName", "width":"150"},
                    {"data": "sort","width":"30"},
                    {"width":"150",data: function (item) {
                            return '<button class="btn btn-primary btn-xs" onclick="add(\'' + item.id + '\')">新增</button>'
                                +' <button class="btn btn-success btn-xs" onclick="edit(\'' + item.id + '\')">编辑</button>'
                                +' <button class="btn btn-danger btn-xs" onclick="del(\'' + item.id + '\')">删除</button>';
                        }}
                ],
                "columnDefs": [
                    {
                        "defaultContent": "",
                        "targets": "_all"
                    }
                ]
            });
            $('#treetable').parent().attr('style','overflow-x: auto');

            $("#btn-add").click("click", function () {
                add('0');
            });

        });

        function add(id) {
            zy.openPage('新增部门','/system/dept/add/page?id='+id);
        }

        function edit(id) {
            zy.openPage('编辑部门','/system/dept/edit/page/'+id);
        }

        function del(id) {
            layer.confirm('确定要删除吗', {
                icon : 3
            }, function() {
                zy.ajax({
                    url : basePath+'/system/dept/status/delete',
                    data : {ids:id},
                    success : function(result) {
                        if (result.code==200) {
                            layer.msg('删除成功');
                            window.location.reload();
                        }else{
                            layer.msg(result.msg, {icon: 2,shift: 6});
                        }
                    }
                });


            });
        }

    </script>
</div>
</body>
</html>